<template>
	<view class="task-list">
		<view class="task-list_item radius-10 m-md section-bg " :class="{'vip' : item.limit_level > 1}" v-for="(item, index) in list" :key="index" @click="goTo(item.id,item)">
			<view class="task-list_hot-bg p-l-sm p-r-sm p-t-sm" v-if="item.type == 2 && item.read_count > 10">
				<view class="text-xs task-list_views">
					<m-icon textColor="#7d755e" name="blaze-line" :text="item.read_count+' 人浏览过'"></m-icon>
				</view>
			</view>
			<view class="p-md flex-start" style="align-items: flex-start;">
				<view class="m-r-md" v-if="item.thumb_src">
					<u-image :src="item.thumb_src" width="80rpx" height="80rpx" :lazy-load="true" radius="10px"></u-image>
				</view>
				<view style="flex:1">
					<view class="flex-between flex-align-items flex-warp-nowarp" style="align-items: flex-start;">
						<view class="task-list_item-title text-sm flex-start flex-warp-nowarp" style="max-width: 65%;align-items: flex-start;">
							<text class="badge vip m-r-sm" v-if="item.limit_level > 1">{{$t('task.item-vip-badge')}}</text>
							<text class="u-line-1 text-c-title text-weight">{{ item.title }}</text>
						</view>
						<view class="flex-start">
							<view v-if="item.cate_title && item.type == 1">
								<text class="badge text-xs">{{item.cate_title}}</text>
							</view>
							<view class="task-list_item-price" v-if="item.type == 2">
								<text class="number text-md" :style="{color:configInfo.mainColor1}">{{ item.unit_salary }}</text>
								<text class="text-xs m-l-xs text-secondary">{{$t('m_tasks.unit')}}/{{ item.salaryp_pany_text }}</text>
							</view>
						</view>
					</view>
					<view class="flex-between flex-align-items m-t-sm m-b-sm" v-if="item.type == 1">
						<view class="task-list_item-price flex-start">
							<text class="number text-lg" :style="{color:configInfo.mainColor1}">{{ item.unit_price }}</text>
							<text class="text-xs m-l-xs text-secondary" v-if="configInfo.money_company">{{configInfo.money_company}}</text>
							<view v-if="item.unit_integral > 0">
								<text class="text-sm number m-l-xs" :style="{color:configInfo.mainColor1}">+ {{item.unit_integral}}</text>
								<text class="text-xs m-l-xs text-secondary" v-if="configInfo.integral_company">{{configInfo.integral_company}}</text>
							</view>
						</view>
						<view class="task-list_item-price flex-start">
							<text class="number text-lg" :style="{color:configInfo.mainColor1}">{{ item.join_num }}</text>
							<text class="text-xs m-l-xs text-secondary"  >已接单</text>
							<text class="number text-lg" :style="{color:configInfo.mainColor1}">+ {{ item.surplus_num  }}</text>
							<text class="text-xs m-l-xs text-secondary"  >未接单</text>
						</view>
						<view class="flex-start text-xs text-secondary" v-if="item.master">
							<text class="m-r-xs" >{{item.channel == 1 ? item.master.nickname : item.master.username}}</text>
							<user-auth-icon type="merchant" size="30rpx" v-if="item.channel == 2"></user-auth-icon>
							<user-auth-icon type="admin" size="30rpx" v-if="item.channel == 1"></user-auth-icon>
						</view>
						<!-- <view class="item_circle" style="width: 50%" >
							<cmd-progress type="line" :percent="item.task_speed ? item.task_speed : 0" :stroke-width="13" :stroke-color="configInfo.mainColor" status="active" :show-info="false"></cmd-progress>
						</view> -->
					</view>
					<view class="item_circle" style="width: 100%" v-if="item.type == 1">
						<cmd-progress type="line" :percent="item.task_speed ? item.task_speed : 0" :stroke-width="13" :stroke-color="configInfo.mainColor" status="active" :show-info="false"></cmd-progress>
					</view>
					<view class="task-list_item-tags m-t-xs m-b-sm" v-if="item.type == 2 && item.tags">
						<text v-for="(item, index) in item.tag_arr" :key="index">{{item}}</text>
					</view>
					<view class="text-xs text-secondary m-t-xs flex-between" v-if="item.type == 2">
						<m-icon name="road-map-line" :text="item.city_name ? item.city_name : '全国' "></m-icon>
						<view class="flex-start">
							<view class="flex-start">
								<user-auth-icon class="m-r-xs" type="merchant" size="30rpx" v-if="item.channel == 2"></user-auth-icon>
								<user-auth-icon class="m-r-xs" type="admin" size="30rpx" v-if="item.channel == 1"></user-auth-icon>
								<text v-if="item.channel == 1 && item.master.nickname">
									{{ item.master.nickname }}
								</text>
								<text v-if="item.channel == 2 && item.master.username">
									{{ item.master.username }}
								</text>
							</view>
							<view class="flex-start m-l-xs">
								<text class="text-xs text-secondary m-r-xs">{{$u.timeFormat((new Date(item.create_time)).getTime(), 'yyyy-mm-dd')}}</text> 发布
							</view>
						</view>
						
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name:"m-tasks",
		props: ['list','emptyText'],
		data() {
			return {
			};
		},
		mounted: function () {
		},
        computed: mapState({
        	configInfo: state => state.config.configInfo,
        }),
		methods: {
			goTo(id,Info){
				uni.navigateTo({
					url: '/pages/task/task_detail?id='+id,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detailInfo', {
							detailInfo:Info,
						})
					}
				});
			}
		}

	}
</script>

<style lang="scss">
	.u-empty{
		padding: 30rpx 0;
	}
	.task-list{
		&_hot-bg{
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			background: linear-gradient(to bottom,#fbe7e7,#ffffff);
		}
		&_vip-bg{
			background: linear-gradient(to bottom,#eee8d6,#ffffff);
		}
		
		&_views{
			font-size: 20rpx;
			color: #7d755e;
			/deep/ .i-icon{
				color: red!important;
			}
		}
		&_item{
			align-items: flex-start;
			position: relative;
		}
		&_item.vip{
			position: relative;
			overflow: hidden;
			// background: linear-gradient(to bottom,#eee8d6,#ffffff);
			// border: 2px solid #282828;
			// box-shadow: 0px 5px 5px #eedba350;
		}
		&_item.vip::before{
			// position: absolute;
			// content: '';
			// background-color: #ffd426;
			// width: 150px;
			// height: 100px;
			// background: linear-gradient(120deg, #ffd42690, #ffd42610);
			// border-radius: 0 0 100% 0;
			// opacity: 0.2;
		}
		&_item.vip .badge.vip{
			color: #eedba3;
			background-color: #282828;
		}
		&_item-footer{
			border-top: 1px solid var(--theme-line-four);
		}
		&_avatar{
			width: 50rpx;
			height: 50rpx;
			border-radius: 50px;
		}
		&_item-integra{
			display: inline-block;
			color:var(--theme-warning);
			// background-color:var(--theme-warning-light)!important;
			// padding: 5rpx 15rpx;
			b{
				margin: 0 5rpx;
				font-weight:400;
			}
		}
		&_item-price{
			.text-lg.number{
				font-size: 35rpx!important;
			}
		}
		&_item-add{
			max-width: 50%;
		}
		&_item-tags{
			text{
				color: var(--theme-text-secondary);
				background-color: var(--theme-line-four);
				font-size: 20rpx!important;
				padding: 5rpx 10rpx;
				margin-right: 15rpx;
				border-radius: 5px;
			}
		}
		
	}
	.item:last-child{
		border-bottom: none;
	}	

	// @keyframes vip{  
	// 	0%	{
	// 		border: 1px solid #ffffff;
	// 	}
	// 	50% { 
	// 		border: 1px solid #e2c1a2;
	// 	} 
	// 	100% {
	// 		border: 1px solid #ffffff;
	// 	} 
	// }
</style>
